<template>
    <div class="m-header" :style="{'padding-top': paddingTop + 'rem', height: paddingTop+.72 + 'rem'}">
        <div class="layout-1" @click="back">
            <i class="icon-kf_navbar_back"></i>
        </div>
        <div class="layout-3" @click="close" v-show="showBackBtn">
            <i class="icon-kf_navbar_close"></i>
        </div>
        <div class="layout-2 flex-item">{{title}}</div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                title: this.$route.query.title ?  this.$route.query.title : '客服中心',
            }
        },
        computed: {
            showBackBtn() {
                var kfzxShowBackBtn = localStorage.getItem('kfzxShowBackBtn') == 'true' ? true : false;
                if(this.$route.name != 'HomeIndex') {
                    return kfzxShowBackBtn;
                }
                return false;
            },
            paddingTop() {
                //var reg = /[\w:/.?#=]*app=app[\w:/.?#=]*/;
                if(/[\w:/.?#=]*app=app[\w:/.?#=]*/.test(location.href)) {
                    return .59
                } else {
                    return .25
                }
            }
        },
        methods: {
            back() {
                if(this.$route.name == 'HomeIndex') {
                    //首页返回
                } else {
                    this.$router.go(-1);
                }
            },
            close() {
                this.$emit('closeAll');
            }
        },
        created() {
        }
    };
</script>
<style lang="scss" type="text/scss" scoped>
    @import "./../scss/mixin";
    @import "./../scss/variables";

    .m-header {
        position: relative;
        background-color: $bg-colorB;
        line-height: px2rem(50);
        color: $f-colorA;
        z-index: 10;
        font-weight: 500;
        box-shadow: 0 1px 1px 0 $bl-colorA;
        font-size: px2rem(52);
        .layout-2 {
            text-align: center;
            font-size: px2rem(34);
        }
        .layout-1 {
            position: absolute;
            padding: px2rem(10) px2rem(10) 0 px2rem(10);
            bottom: px2rem(16);
            left: px2rem(32);
        }
        .layout-3 {
            position: absolute;
            left: px2rem(96);
            bottom: px2rem(15);
        }
    }
</style>
